<template>
  <dtDialog
    :title="textMap[dialogStatus]"
    :visible.sync="dialogFormVisible"
    :is-loading="loading"
    @closeDialog="resetTemp()"
    @comfirmBtn="onSubmit()"
  >
    <DtForm :form-opts="config" :width-size="1" :ref-obj.sync="config.ref" />
  </dtDialog>
</template>
<script>
import appTypeApi from '@/framework/api/developerCenter/application-center/applicationClassify'
import { uuId } from '@/framework/utils/uuid'

export default {
  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改分类',
        create: '新建分类'
      },
      config: {
        ref: null,
        labelWidth: '120px',
        formData: {
          id: '',
          typeName: '',
          typeCode: '',
          remark: ''
        },
        labelPosition: 'right',
        columns: [
          {
            label: '分类名称',
            prop: 'typeName',
            type: 'text',
            component: 'el-input',
            maxlength: 15
          },
          {
            label: '分类编码',
            prop: 'typeCode',
            type: 'text',
            component: 'el-input',
            maxlength: 20
          },
          {
            label: '描述',
            prop: 'remark',
            type: 'textarea',
            component: 'el-input',
            maxlength: 200
          }
        ],
        rules: {
          typeName: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入分类名称'
            }
          ],
          typeCode: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入分类编码'
            }
          ]
        }
      }
    }
  },
  created() {
  },
  methods: {
    // 关闭弹窗
    resetTemp() {
      this.reset()
    },
    // 表单重置
    reset() {
      this.config.formData = {
        id: '',
        typeName: '',
        typeCode: '',
        remark: ''
      }
      this.$nextTick(() => {
        this.config.ref.clearValidate()
      })
    },
    // 打开新增弹窗
    classifyopen(type, row) {
      this.dialogStatus = type
      this.dialogFormVisible = true
      if (type === 'create') {
        this.config.formData.typeCode = uuId(8)
        this.config.columns[1].disabled = false
      } else {
        appTypeApi.sysAppTypeDetail({ id: row.id }).then((res) => {
          this.config.formData = res.data
          this.config.columns[1].disabled = true
        })
      }
    },
    // 创建请求
    async onSubmit() {
      this.config.ref.validate(async (valid) => {
        if (valid) {
          const fn = this.config.formData.id != '' ? appTypeApi.sysAppTypeEdit : appTypeApi.sysAppTypeAdd
          const mes = this.config.formData.id != '' ? '修改' : '新增'
          fn(this.config.formData).then((response) => {
            this.$dtModal.msgSuccess(`${mes}成功`)
            this.dialogFormVisible = false
            this.$parent.getList()
          })
        }
      })
    }

  }
}
</script>

